<template>
<nav class="navbar navbar-expand-lg">
<div class="container-xl"><!-- site logo --><a class="navbar-brand" href="/"><img src="/source/images/logo.svg" alt="logo" /></a>
  <div class="collapse navbar-collapse"><!-- menus -->
    <ul class="navbar-nav mr-auto">
      <li :class="path=='/' ? 'nav-item active' : 'nav-item'" ><router-link class="nav-link" to="/">首页</router-link></li>
      <template v-for="item in categoryList">
        <li :class="item.id==categoryId ?'nav-nav-item active':'nav-item'">
          <router-link :class="(item.children == undefined || item.children.length <= 0)?'nav-link':'nav-link dropdown-toggle'" :to="'/blog/category/'+item.id">{{item.name}}</router-link>
        </li>
      </template>
      <li :class="path=='/guestbook' ? 'nav-item active' : 'nav-item'"> <router-link class="nav-link" to="/guestbook">留言版</router-link></li>
    </ul>
  </div>
  <!-- header right section -->
  <div class="header-right"><!-- social icons -->
    <!-- header buttons -->
    <div class="header-buttons">
      <button  class="search icon-button" @click="searchOpen"><i class="icon-magnifier"></i></button>
      <button  class="burger-menu icon-button"><span class="burger-icon"></span></button>
    </div>
  </div>
</div>
  <!-- canvas menu -->
  <div class="canvas-menu d-flex align-items-end flex-column"><!-- close button -->
    <button type="button" class="btn-close" aria-label="Close"></button>
    <!-- logo -->
    <div class="logo"><img src="/source/images/logo.svg" alt="Katen" /></div>
    <!-- menu -->
    <nav>
      <ul class="vertical-menu">
        <li class="active"><a href="index.html">Home</a>
          <ul class="submenu">
            <li><a href="index.html">Magazine</a></li>
            <li><a href="personal.html">Personal</a></li>
            <li><a href="personal-alt.html">Personal Alt</a></li>
            <li><a href="minimal.html">Minimal</a></li>
            <li><a href="classic.html">Classic</a></li>
          </ul>
        </li>
        <li><a href="blog.html">Lifestyle</a></li>
        <li><a href="blog.html">Inspiration</a></li>
        <li><a href="#">Pages</a>
          <ul class="submenu">
            <li><a href="blog.html">Category</a></li>
            <li><a href="blog-single.html">Blog Single</a></li>
            <li><a href="blog-single-alt.html">Blog Single Alt</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="feedback.html">Contact</a></li>
          </ul>
        </li>
        <li><a href="feedback.html">Contact</a></li>
      </ul>
    </nav>
    <!-- social icons -->
    <ul class="social-icons list-unstyled list-inline mb-0 mt-auto w-100">
      <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
    </ul>
  </div>
  <!-- search popup area -->
  <div class="search-popup"><!-- close button -->
    <button type="button" class="btn-close" aria-label="Close"  @click="searchClose"></button>
    <!-- content -->
    <div class="search-content">
      <div class="text-center">
        <h3 class="mb-4 mt-0">按回车键关闭</h3>
      </div>
      <!-- form -->
      <div class="d-flex search-form">
        <input class="form-control me-2" type="search" name="keywords" v-model="keywords" placeholder="输入关键词..." aria-label="Search" @keyup.enter="searchClose">
        <button class="btn btn-default btn-lg" @click="search"><i class="icon-magnifier"></i></button>
      </div>
    </div>
  </div>
</nav>
</template>
<script>
module.exports={
  name: "navbar",
  data: function() {
    return {
      categoryList: [],
      categoryId:"",
      keywords:"",
      path:""
    }
  },
  mounted(){
    this.categoryId=this.$route.params.id;
    this.path=this.$route.path;
    this.getCategoryList();
  },
  methods: {
    getCategoryList(){
      axios.get('/blog/api/category/list')
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.categoryList=data;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    },
    searchOpen(){
      $(".search-popup").addClass("visible")
    },
    searchClose(){
      $(".search-popup").removeClass("visible")
    },
    search(){
      this.$router.push({
        path: '/search',
        query: {
          keywords: this.keywords
        }
      })
    }
  }
}
</script>